<template>
  <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
    <md-nav-bar :title="data.title" />
    <custom-waterfalls-flow :value="data.list" @loaded="loaded"></custom-waterfalls-flow>
  </mescroll-body>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom);
// 接口
import { momentsDetail } from '@/api';
import type { Index } from '@/api/data';

const data = reactive<{ title: string; list: Index.Moments.Data[]; id: string | null }>({
  title: '精彩瞬间',
  id: null,
  list: [],
});

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = (mescroll: any) => {
  momentsDetail({ id: data.id, page: mescroll.num, limit: 15 })
    .then(res => {
      const curPageData = res?.data?.data?.map(item => ({ image: item })) || []; // 当前页数据
      if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
      data.list = data.list.concat(curPageData); //追加新数据
      //方法一(推荐): 后台接口有返回列表的总页数 totalPage
      mescroll.endByPage(curPageData.length, res?.data?.total || 0);
    })
    .catch(() => {
      mescroll.endErr(); // 请求失败, 结束加载
    });
};

const loaded = () => {
  console.log('加载完成');
};

onLoad(option => {
  data.id = option?.id;
  data.title = option?.title || '精彩瞬间';
});
</script>

<style lang="scss">
// .container {
// 	overflow-y: auto;
// }
</style>
